<template>
	<view class="index-container">
		<!-- <u-status-bar ></u-status-bar> -->
		<u-navbar-home :bgColor="bgColor">
			<template #left>
				<view class="title u-flex-y-center" style="color: #fff">
					<u-image :src="logo" width="80rpx" height="80rpx"></u-image>
					<view style="width: 10rpx"> </view>
					山西饲草收储交易中心
				</view>
			</template>
		</u-navbar-home>
		<view class="navbar">

			<view class="searchContainer u-flex-y-center">
				<view class="" style="flex: 1;">
					<u-search placeholder="搜索商品" bgColor="#fff" :showAction="false" disabled
						@click="searchGoods()"></u-search>
				</view>
				<view class="signIn iconfont icon-qiandao u-flex-xy-center" @click="gopoints()"> </view>
			</view>
			<u-tabs :list="list" :activeStyle="tabsActiveStyle" :inactiveStyle="tabsStyle" lineWidth="0" lineHeight="0"
				@click="tabschange">
				<view slot="right" style="padding-left: 4px" @click="$u.goPage('/pages/type/type')">
					<view class="u-flex-xy-center" style="width: 80rpx">
						<u-icon name="list" size="21" bold color="#fff"></u-icon>
					</view>
				</view>
			</u-tabs>
			<view class="swiperContainer">
				<u-swiper showTitle :list="swiperList" keyName="imageUrl" :autoplay="true" :circular="true"
					height="400rpx" imgMode="aspectFill" interval="3000" @click="swiperListtap"></u-swiper>
			</view>
			<view class="typeContainer u-flex-xy-center z-card">
				<view class="typeItem u-flex-xy-center" v-for="(item, key) in typeList" :key="key"
					@click="tabschange(item)">
					<view class="typeLogoUrl u-flex-xy-center">
						<!---->
						<u-image :src="item.logoUrl" width="96rpx" height="96rpx" mode="aspectFit"></u-image>
					</view>
					<view class="typefullName u-flex-xy-center">
						{{ item.fullName }}
					</view>
				</view>
			</view>
		</view>
		<view class="gonggaotitle" v-if="newslimit.length != 0">
			企业资讯 <view class="en">Enterprise News</view>
		</view>
		<!-- {{ newslimit }} -->
		<view style="padding: 20rpx" v-if="newslimit.length != 0">
			<u-scroll-list :indicator="false">
				<view class="scroll-list" style="flex-direction: row">
					<view class="scroll-list__goods-item" v-for="(item, index) in newslimit" :key="index"
						@click="goPage({ type: 'news', id: item.id })">
						<view class="scroll-list__goods-item__image">
							<u--image :showLoading="true" :src="item.coverImage" width="320rpx" height="180rpx"
								mode="aspectFill"></u--image>
						</view>

						<view class="scroll-list__goods-item__text">
							<view class="u-line-1">
								{{ item.title }}
							</view>
							<view class="u-line-1 time">
								{{ $u.timeFormat(item.createTime) }}
							</view>
						</view>
					</view>

					<view class="scroll-list__show-more" v-if="newslimit.length >= 5"
						@click="$u.goPage('/pages/companyPage/companyPage')">
						<text class="scroll-list__show-more__text">查看更多</text>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<goods></goods>
		<u-grid :col="2">
			<u-grid-item @click="goPage({ type: 'JBCNYKJGS' })">
				<view class="u-flex-xy-center u-flex-between grid-item2">
					<view class=""> 公司简介 </view>
					<u-icon name="arrow-right" size="14"></u-icon>
				</view>
			</u-grid-item>
			<u-grid-item @click="$u.goPage('/pages/basePage/basePage')">
				<view class="u-flex-xy-center u-flex-between grid-item2">
					<view class=""> 公司直属基地 </view>
					<u-icon name="arrow-right" size="14"></u-icon>
				</view>
			</u-grid-item>
			<u-grid-item @click="goPage({ type: 'JBCNYKJGS' })">
				<u--image :showLoading="true" :src="gsjj.fileUrl" width="375rpx" height="210rpx"
					mode="aspectFill"></u--image>
			</u-grid-item>
			<u-grid-item @click="$u.goPage('/pages/basePage/basePage')">
				<u--image :showLoading="true" :src="jdxx.fileUrl" width="375rpx" height="210rpx"
					mode="aspectFill"></u--image>
			</u-grid-item>
		</u-grid>
		<view style="height: 50rpx"> </view>
		<tabbar></tabbar>

		<u-popup mode="center" :show="firstres" @close="firstconfirm" :customStyle="popupCustomStyle">
			<view class="firstcontent">
				<u--image :showLoading="true" :src="XCXQDHY.paramConf" width="600rpx" height="280rpx"
					mode="widthFix"></u--image>
				<view class="firstbtn" @click="gopoints()">

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import yukefu from "@/components/yukefu/yukefu.vue"
	import {
		getSwiperList,
		getProductClass,
		getHomeInfo,
		getCompanyNewsLimit,
		getOpenid,
		getFirstEnterApplet
	} from "@/api/index.js";
	import logo from "@/static/logo.png";
	import qs from "qs";
	import goods from "./components/goods.vue";
	import {
		getAccessToken
	} from "@/utils/auth";
	export default {
		components: {
			goods,
			// yukefu
		},
		data() {
			return {
				popupCustomStyle: {
					background: "none"
				},
				XCXQDHY: {},
				firstres: false,
				content: '欢迎您首次使用我们的小程序！现在签到即可获得额外积分和奖励，更多惊喜等着您。',
				// 企业资讯
				newslimit: [],
				logo,
				jdxx: {},
				gsjj: {},
				bgColor: "#39C03E",
				tabsStyle: {
					color: "#fff",
				},
				tabsActiveStyle: {
					color: "#FFD700",
					fontWeight: "bold",
				},
				list: [],
				// 轮播图数据
				swiperList: [],
				typeList: [],
				goodstitleList: [{
						text1: "特价专区",
						text2: "优惠不断",
					},
					{
						text1: "采购广场",
						text2: "海量采购",
					},
					{
						text1: "供应广场",
						text2: "品质保证",
					},
				],
			};
		},
		onLoad(query) {
			console.log(query);
			if (query.type == "share") {
				let data = JSON.parse(query.data)
				console.log(data);
				uni.navigateTo({
					url: `${data.url}?${qs.stringify(data.query)}`,
				})
				// type=share&uuid=
				// return
			}
			this.init();
		},
		onShareAppMessage: function() {

			return {
				title: "骏宝宸饲草交易", // 动态标题
				path: "/pages/index/index", // 动态路径
				// imageUrl: this.swiperlist.length == 0 ? '' : this.swiperlist[0],
			};
		},
		// 右上角转发到朋友圈
		onShareTimeline() {
			return {
				title: "骏宝宸饲草交易", // 动态标题
				// query: "id=" + this.query.id,
				// imageUrl: this.swiperlist.length == 0 ? '' : this.swiperlist[0],
			};
		},
		methods: {
			async init() {

				let limit = await getCompanyNewsLimit();
				this.newslimit = limit.data;
				// 公司
				let jbcnykjgs = await getHomeInfo({
					code: "JBCNYKJGS",
				});
				this.gsjj = jbcnykjgs.data;
				let jdxx = await getHomeInfo({
					code: "GSJDXX",
				});
				this.jdxx = jdxx.data;
				console.log(jbcnykjgs);
				let swiperList = await getSwiperList();
				this.swiperList = swiperList.data.map((e) => {
					return {
						...e,
						title: e.name,
					};
				});
				let classlist = await getProductClass({
					classType: 1
				});
				classlist = classlist.data;
				// classlist = classlist.data.filter((e) => {
				// 	return e.parentId == 0;
				// });
				this.list = [{
						name: "推荐",
					},
					...classlist.map((e) => {
						return {
							...e,
							name: e.abbrName,
						};
					}),
				];
				this.typeList = classlist;
				this.firstInit();
			},

			// 封装微信获取用户code，避免嵌套
			login() {
				return new Promise((resolve, reject) => {
					uni.login({
						success(res) {
							console.log(res);
							resolve(res);
						},
						fail(err) {
							reject(err);
						},
					});
				});
			},
			async firstInit() {
				// 调用微信登陆
				let res = await this.login();
				console.log(res);
				if (res.code && ["login:ok"].includes(res.errMsg)) {
					// 后端通过code调用微信API返回openid/unionid/session_key参数， 存储起来,前端无法直接调用微信相关API
					let openIdRes = await getOpenid({
						code: res.code,
					});
					let firstres = await getFirstEnterApplet({
						wechatOpenid: openIdRes.data
					})
					this.firstres = firstres.data
					if (this.firstres) {
						let XCXQDHY = await getHomeInfo({
							code: "XCXQDHY",
						});
						this.XCXQDHY = XCXQDHY.data;
					}
				} else {
					// 异常处理，再次发起请求或者抛出异常
					// .....
				}
			},
			firstconfirm() {
				this.firstres = false
			},
			goPage(query = {}) {
				uni.navigateTo({
					url: "/pages/parse/parse?" + qs.stringify(query),
				});
			},
			openLocationfn() {
				let [lat, lng] = JSON.parse(this.jdxx.paramConf);

				uni.openLocation({
					latitude: lat,
					longitude: lng,
					scale: 18,
					success: function() {
						console.log("success");
					},
				});
			},
			swiperListtap(index) {
				let item = this.swiperList[index];
				console.log(item, item.swiperType, "item");
				if (item.swiperType == 1) {
					uni.setStorageSync("goodsListKey", {
						fullName: item.level3Name || item.level2Name || item.level1Name,
					});
					uni.navigateTo({
						url: "/pages/shop/goods/list/list?" +
							qs.stringify({
								level1Type: item.level1Type,
								level2Type: item.level2Type,
								level3Type: item.level3Type,
							}),
					});
				}
				if (item.swiperType != 2 || !item.companyNewsId) {
					return;
				}
				uni.navigateTo({
					url: "/pages/parse/parse?" +
						qs.stringify({
							type: "news",
							id: item.companyNewsId,
						}),
				});
			},
			tabschange(item) {
				if (item.index == 0) {
					uni.navigateTo({
						url: "/pages/type/type",
					});
				} else {
					// 使用本地缓存存储数据
					uni.setStorageSync("goodsListKey", {
						fullName: item.fullName,
					});
					uni.navigateTo({
						url: "/pages/shop/goods/list/list?" +
							qs.stringify({
								level1Type: item.id,
							}),
					});
				}
			},
			searchGoods() {
				uni.navigateTo({
					url: "/pages/shop/goods/list/list?" +
						qs.stringify({
							type: "search",
						}),
				});
			},
			gopoints() {
				this.firstres = false
				// let islogin = getAccessToken() ? true : false
				// if (!islogin) {
				// 	uni.navigateTo({
				// 		url: "/pages/login/login",
				// 	});
				// 	return
				// }
				uni.navigateTo({
					url: "/pages/points/points",
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.firstcontent {
		position: relative;

		.firstbtn {
			width: 96rpx;
			height: 40rpx;
			position: absolute;
			right: 72rpx;
			bottom: 60rpx;
			// background: #000;

		}
	}

	.index-container {
		.navbar {
			// background-color: #39C03E;
			padding-bottom: 20rpx;
			background: linear-gradient(to bottom, #39c03e 0%, #f4f4f4 100%);
			// position: relative;

			// &::after {
			// 	position: absolute;
			// 	border-bottom-left-radius: 50rpx;
			// }

			.title {
				font-weight: bold;
				height: 88rpx;
				color: #fff;
				padding-left: 20rpx;
			}

			.searchContainer {
				padding: 0 20rpx;

				.signIn {
					font-size: 44rpx;
					font-weight: bold;
					width: 80rpx;
					height: 80rpx;
					color: #fff;
				}
			}

			.swiperContainer {
				padding: 0 20rpx;
			}

			.typeContainer {
				flex-wrap: wrap;
				background: #fff;
				margin: 20rpx;
				padding: 16rpx 0;
				justify-content: flex-start;

				.typeItem {
					width: 25%;
					height: 150rpx;
					flex-direction: column;

					.typefullName {
						margin-top: 10rpx;
						font-size: 24rpx;
						color: #606266;
					}
				}
			}
		}

		.ckgd {
			height: 80rpx;
			display: flex;
			font-size: 24rpx;
			justify-content: flex-end;
			padding-right: 20rpx;
			color: $uni-text-color-grey;
		}

		.goodstitleBox {
			justify-content: space-between;
			padding: 0 20rpx;
			text-align: center;

			// 750 - 40 710/3 2 3
			.goodstitleItem {
				width: 220rpx;
				height: 120rpx;
				background: #fff;
				flex-direction: column;
				border-radius: 20rpx;

				.text1 {
					font-size: 32rpx;
					padding-bottom: 4rpx;
				}

				.text2 {
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}

				&.active {
					background-color: #39c03e;
					color: #fff;

					.text2 {
						color: #fff;
					}
				}
			}
		}

		.goodslist {
			flex-wrap: wrap;
			padding: 0 20rpx 20rpx 20rpx;
			justify-content: space-between;
		}
	}

	.grid-item2 {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		height: 60rpx;
		font-size: 28rpx;
		color: $uni-text-color;
	}

	.scroll-list {
		@include flex(column);
		//   background: #fff;
		// box-shadow: 6rpx 10rpx 12rpx rgba(126, 126, 126, 0.1);

		&__goods-item {
			box-shadow: 6rpx 10rpx 12rpx rgba(126, 126, 126, 0.1);
			margin-right: 20rpx;
			background: #fff;
			border-radius: 12rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			&__image {
				width: 320rpx;
				height: 180rpx;
				//
			}

			&__text {
				width: 320rpx;
				padding: 20rpx;
				color: #333;
				font-size: 24rpx;

				.time {
					margin-top: 6rpx;
					color: #999;
				}
			}
		}

		&__show-more {
			background-color: #fff;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;
			justify-content: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #333;
				line-height: 16px;
			}
		}
	}

	.gonggaotitle {
		color: #333;
		font-size: 32rpx;
		line-height: 36rpx;
		font-weight: bold;
		padding-left: 20rpx;
		display: flex;
		align-items: flex-end;

		.en {
			padding-left: 10rpx;
			font-size: 24rpx;
			color: #999;
			font-weight: lighter;
			line-height: 1;
		}
	}
</style>